<template>
  <div v-loading="loading">
    <div class="coupon-card">
      <el-row :gutter="10">
        <el-col :xs="12" :sm="8" :md="8">
          <div class="app-main-content-box"><OnePointCard :data="cardData_1" /></div>
        </el-col>
      </el-row>
    </div>

    <div class="table-container app-main-content-box">
      <el-table :data="list" size="small" stripe border style="width: 100%" empty-text="暂无数据">
        <el-table-column prop="createTime" label="发行时间" fixed="left" width="150" />
        <el-table-column prop="couponName" label="券名称" />
        <el-table-column prop="couponCode" label="券码" />
        <el-table-column prop="couponType" label="券类型">
          <template slot-scope="scope">
            <span>{{ couponTypeOptions[scope.row.couponType] }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="receiveWay" label="投放渠道">
          <template slot-scope="scope">
            <span>{{receiveWayOptions[scope.row.receiveWay]}}</span>
          </template>
        </el-table-column>-->
        <!-- <el-table-column prop="customerName" label="顾客" /> -->
      </el-table>
      <!-- 分页 -->
      <pagination-direction
        v-if="paginationConfig.total!==0"
        :config="paginationConfig"
        @sizeschange="sizesChange"
        @pagechange="pageChange"
      />
    </div>
  </div>
</template>

<script>
import { getMemberGetCouponRecord } from '@/api/coupon'
import OnePointCard from '../OnePointCard'
export default {
  components: {
    OnePointCard
  },
  props: {
    activeName: {
      type: String,
      require: true
    },
    vipDetail: {
      type: Object,
      require: true
    }
  },
  data() {
    return {
      // 配置
      paginationConfig: {
        // 分页配置
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      couponTypeOptions: {
        GENERAL: '通用券',
        CASH: '代金券',
        DISCOUNT: '折扣券',
        cash: '代金券',
        discount: '折扣券',
        exchange: '兑换券',
        cash_wx_busi: '微信商家代金券',
        discount_wx_busi: '微信商家折扣券',
        cash_wx_pay: '微信支付代金券'
      },
      receiveWayOptions: {
        1: '优惠券二维码',
        2: '会员开卡赠送',
        3: '会员充值赠送',
        4: '会员邀请奖励',
        5: '积分商城兑换',
        6: '人工客服赠送'
      },
      // 状态
      loading: false,
      // 数据
      cardData_1: ['累计领券/张', 0],
      list: [],
      filterForm: {
        customerId: ''
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    /**
		 *  获取数据
		 */
    // 获取数据
    fetchData(page = this.paginationConfig.page, pageSize = this.paginationConfig.pageSize) {
      // this.$refs.filterForm.validate(async valid => {
      //   if (valid) {
      // 请求数据
      const params = Object.assign({}, this.filterForm)
      params.page = page
      params.pageSize = pageSize
      params.customerId = this.vipDetail.customer.id
      this.loading = true
      getMemberGetCouponRecord(params)
        .then(res => {
          this.list = res.data.list
          this.paginationConfig.total = res.data.total
          this.paginationConfig.page = res.data.pageNum
          this.cardData_1.splice(1, 1, this.$options.filters.parseNumberToThousands(res.data.total, 0, false))
        })
        .catch(err => {})
        .finally(() => {
          this.loading = false
        })
      // }
      // });
    },

    // 分页sizes改变
    sizesChange() {
      this.fetchData()
    },

    // 分页page改变
    pageChange() {
      this.fetchData()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.coupon-card {
	.app-main-content-box {
		margin-bottom: 10px;
	}
}
</style>
